<template>
    <div class="container">
        <div class="search-bar">
            <input type="text" placeholder="请输入关键字" v-model="keyword" class="search-input">
            <input type="button" value="查找" @click="btnQuery" class="search-button">
            <input type="button" value="新增" @click="btnAdd" class="add-button">
        </div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in books" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.bookName }}</td>
                    <td>{{ item.author }}</td>
                    <td>
                        <input type="button" value="编辑" @click="btnEdit(item.id)" class="edit-button">
                        <input type="button" value="删除" @click="btnDel(item.id)" class="delete-button">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getAll, delItem } from '@/api/bookApi';
import { useRouter } from 'vue-router';
// import '@/css/style.css'

// ==获取路由实例-开始==

let router = useRouter()

// ==获取路由实例-结束==


// ==响应式数据-开始==
let keyword = ref('')
let books = reactive([])


// ==响应式数据-结束==


// ==生命周期函数-开始==
onMounted(async () => {
    try {
        const data = await getAll(); // 加载初始数据
        console.log(data.data);
        books.push(...data.data);
    } catch (error) {
        console.error("加载书籍列表失败:", error);
        // 可以在这里添加错误提示，比如使用 Element Plus 的 ElMessage
        // ElMessage.error('加载书籍列表失败');
    }
});

// ==生命周期函数-结束==



// ==动作逻辑-开始==

function btnAdd() {
    console.log('新增');
    // 跳转到/bookadd
    router.push('/bookadd');
}

async function btnDel(id) {
    console.log('尝试删除 ID:', id);
    if (confirm('真的要删除吗?')) {
        try {
            const res = await delItem(id);
            if (res.code === 1000) { // 假设 1000 代表成功
                console.log('删除成功');
                // 从 books 数组中移除对应的项
                const index = books.findIndex(item => item.id === id);
                if (index !== -1) {
                    books.splice(index, 1);
                }
            } else {
                console.error("删除失败:", res.msg || '未知错误');
                // ElMessage.error(res.msg || '删除失败');
            }
        } catch (error) {
            console.error("删除请求出错:", error);
            // ElMessage.error('删除请求失败');
        }
    }
}
function btnEdit(id) {
    console.log('编辑',id);
    router.push(`/bookedit/${id}`);
}

async function btnQuery() {
    console.log('查找关键字:', keyword.value);
    const trimKeyword = keyword.value.trim();
    try {
        const data = await getAll(trimKeyword); // 使用关键字查询
        console.log('查询结果:', data.data);
        // 先清空 books 数组，再添加查询结果
        books.splice(0, books.length); // 比 books = [] 更好，因为保留了 reactive 特性
        books.push(...data.data);
    } catch (error) {
        console.error("查找书籍失败:", error);
        // ElMessage.error('查找书籍失败');
    }
}


// ==动作逻辑-结束==

</script>
